function Stars(name, count, size){
	this.count = count || 5
	this.size = size || 30
	this.name = name
	this.box = document.querySelector('[data-star=' + name + ']')
//	ele表示要显示星星的标签元素（标签元素的筛选器）
	this.show()		//在构造函数中直接调用show方法，使用Stars对象的开发者就不需要调用show方法
}
Stars.prototype.show = function(){
	for (var i = 0; i < this.count; i++) {
		var star = document.createElement('img')
		star.src = 'star-yellow.png'
		star.style.width = this.size + 'px'
		star.style.marginRight = this.size * 0.5 + 'px'
		star.dataset.score = i + 1
		star.dataset.index = i
		star.onclick = this.onStarClick.bind(this)
		this.box.appendChild(star)
	}
	var score = document.createElement('span')
	score.style.display = 'inline-block'
	score.style.height = this.size + 'px'
	score.style.lineHeight = this.size * 1.1 + 'px'
	score.style.verticalAlign = 'top'
	score.style.fontSize = this.size * 0.6 + 'px'
	score.style.color = '#666'
	this.box.appendChild(score)
	
	var input = document.createElement('input')
	input.value = 0
	input.name = this.name + '-score'
	input.type = 'hidden'		//type=hidden的文本框在页面上默认就是隐藏的，它可以在页面上保存数据，这些数据会随着表单一起提交到服务端
	this.box.appendChild(input)
}
Stars.prototype.onStarClick = function(ev){
	var stars = this.box.querySelectorAll('img')
//	标签元素也有querySelector等方法，比直接在document上使用这些方法更精确，它可以限制只在指定的标签内部查找元素
	var score = ev.currentTarget.dataset.score
	for (var i = 0; i < stars.length; i++) {
		if (stars[i].src.endsWith('red.png')) {
			stars[i].src = 'star-yellow.png'
		}
	}		//将已经变成红色的星星全部变成黄色
	for (var i = 0; i < score; i++) {
		stars[i].src = 'star-red.png'
	}		//将被点击的星星以及它左侧的星星变成红色
	var scoreSpan = this.box.querySelector('span')
	scoreSpan.innerText = score + '分'
	
	var input = this.box.querySelector('input')
	input.value = score
}

Array.prototype.slice.call(document.querySelectorAll('[data-star]')).forEach(function(star){
	new Stars(star.dataset.star)
})

